<template>
    <div>
        <form action="" @submit.prevent="handleFormSubmit">
            <div class="flex flex-col max-w-md">
                <label for="uname">用户名</label>
                <input type="text" name="usernmae" id="uname" v-model="username">
            </div>
            <div class="flex flex-col  max-w-md">
                <label for="pwd">密码</label>
                <input type="password" name="pwd" id="" v-model="password">
            </div>
            <div class="flex flex-col  max-w-md">
                <label for="descrip">描述</label>
                <textarea name="description" id="descrip" rows="10" v-model="description"></textarea>
            </div>
            <div class="max-w-md text-right py-2">
                <button type="submit" class="px-2 py-1 border">更新</button>
            </div>
        </form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UsersApi } from '../../../api'
import { MessageBox } from '../../../components/dialog/MessageBox'
let user=ref<User>()
let username=ref<string>()
let password=ref<string>()
let description=ref<string>()
//handleFormSubmit
async function handleFormSubmit(params:Event) {
   try {
     const event = params as SubmitEvent
     const formData = new FormData(event.target as HTMLFormElement)
     const data = Object.fromEntries(formData.entries())
     console.log(formData)
     console.log(data)
     const res = await UsersApi.updateCurrentUser(data)
     console.log(res)
     MessageBox.alert(res.message)
   } catch (error) {
    
   }
}
async function fetchData() {
    user.value = (await UsersApi.getCurrentUser()).data
    username.value = user.value.userName
    password.value = user.value.password
    description.value = user.value.description
}
fetchData()

</script>

<style scoped>

</style>